<script setup lang="ts">
import { getQRcode, getQRkey } from "@/apis/user";
import { onMounted } from "vue";
import { ref } from "vue";
import { useLoginStore } from "@/stores/login";
const store = useLoginStore();
const qrKey = ref("");
const qrLocation = ref("");
onMounted(async () => {
  const getKeyRes = await getQRkey();
  qrKey.value = getKeyRes.data.data.unikey;
  const res = await getQRcode({ key: qrKey.value });
  if (res.data.code !== 200) {
    return;
  }
  qrLocation.value = res.data.data.qrimg;
});
// const otherWaysShow = ref(false);
const otherWays = () => {
  // otherWaysShow.value = !otherWaysShow.value;
  store.otherWayShow = !store.otherWayShow;
};
</script>
<template>
  <div class="QRcode" v-if="!qrLocation">
    <img :src="qrLocation" alt="" />
    <p>请扫码登录</p>
    <p @click="otherWays">选择其它方式登录</p>
  </div>
</template>
<style scoped lang="scss">
.QRcode {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 20px;
  p {
    color: white;
  }
}
</style>
